<template>
  <div class="editor" style="heigth: 100%">
    <div ref="editorForm" style="overflow: auto; height: 100%"></div>
  </div>
</template>
<script>
import E from 'wangeditor';
export default {
  name: 'WangEditor',
  // 父子组件传值
  props: {
    // 传递过来的编辑器内容参数
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 真正的编辑器里的内容
      editorContent: '',
      // 编辑器对象
      editor: null
    };
  },
  watch: {
    // 当父组件的内容变化时需要更新编辑器的内容
    content() {
      this.editor.txt.html(this.text);
    }
  },
  mounted() {
    // 生成富文本容器对象
    this.editor = new E(this.$refs.editorForm);
    // this.editor.txt.html(this.text);
    // 配置代码高亮插件 - main.js里面引入相应css
    // this.editor.highlight = hljs

    // 配置菜单栏 - 清除不需要的菜单栏 ('视屏')
    this.editor.config.excludeMenus = [
      'video'
    ];
    // 不打开全屏
    this.editor.config.showFullScreen = false;

    // 设置容器高度
    this.editor.config.height = 560;

    // 配置容器的z-index值
    this.editor.config.zIndex = 100;

    // 清空编辑器的内容
    // editor.txt.clear()

    // 配置 onchange 回调函数 用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行 200ms后执行。
    this.editor.config.onchange = (newHtml) => {
      console.log('富文本组件change之后的html', newHtml);
      // emit响应到父组件，把值携带过去，此处发送的值，父组件由另外一个变量接收，为了防止change时光标乱跳
      this.$emit('getEditorContent', newHtml);
    };

    // 配置上传服务器端口(图片、视频之类)
    this.editor.config.uploadImgServer = 'http://test.zhihanyixing.com:8084/file/richTextupload';
    // this.editor.config.uploadImgServer = 'http://119.4.41.136:5566/file/richTextupload';
    // this.editor.config.uploadImgServer = 'http://192.168.1.31:8084/file/richTextupload';

    // 配置自定义上传参数名
    this.editor.config.uploadFileName = 'file';

    // 一次最多上传 1 个图片
    this.editor.config.uploadImgMaxLength = 1;
    // 图片大小
    this.editor.config.uploadImgMaxSize = 50 * 1024 * 1024; // 默认为3M

    // 上传图片时，各个阶段的回调函数
    this.editor.config.uploadImgHooks = {
      // 图片上传并返回了结果，图片插入已成功
      success: function (xhr) {
        console.log('success', xhr);
      },
      // 图片上传并返回了结果，但图片插入时出错了
      fail: function (xhr, editor, resData) {
        console.log('fail', resData);
      },
      // 上传图片出错，一般为 http 请求的错误
      error: function (xhr, editor, resData) {
        console.log('error', xhr, resData);
      },
      // 上传图片超时
      timeout: function (xhr) {
        console.log('timeout');
      },
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      customInsert: function (insertImgFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result);
        console.log(result);

        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(result.data[0]);
      }

    };

    // 创建富文本对象实例
    this.editor.create();
    this.editor.txt.html(this.content);
  }
};
</script>
<style lang="less">
.w-e-text-container {
  height: 100% !important;
}
</style>
